<template>
    <view class="container">
        <div class="border">
            <div class="border-content">
                <div style="height: 10px;"></div>
                <div class="top-line">
                    <div class="line"></div>
                    <div style="width: 10px;"></div>
                    <div style="color: #1A512C;">收运路线预览</div>
                </div>
                <div style="height: 10px;"></div>
                <!-- 表单展示 -->
                <div style="color: #718778;">
                    <div class="form-flex">
                        <div style="width: 30%;color: #1A512C;font-weight: 500;">日期</div>
                        <div class="borders">
                            <div style="height: 5rpx;"></div>
                            {{ this.time?this.time:'暂无' }}
                            <div style="height: 5rpx;"></div>
                        </div>
                    </div>
                    <div style="height: 10px;"></div>
                    <div class="form-flex">
                        <div style="width: 30%;color: #1A512C;font-weight: 500;">时间</div>
                        <div style="display: flex;align-items: center;width: 70%;">
                            <div class="borders-min" style="width: 100%;">
                            <div style="height: 5rpx;"></div>
                            {{ this.time1 }}
                            <div style="height: 5rpx;"></div>
                            </div>
                            <!-- <div style="width: 5px;"></div>
                            <div style="width: 20%;text-align: center;">至</div>
                            <div style="width: 5px;"></div>
                            <div class="borders-min" style="width: 40%;">
                            <div style="height: 5rpx;"></div>
                            24:23
                            <div style="height: 5rpx;"></div>
                            </div> -->
                        </div>
                    </div>
                    <div style="height: 10px;"></div>
                    <div class="form-flex">
                        <div style="width: 30%;color: #1A512C;font-weight: 500;">收运车</div>
                        <div class="borders">
                            <div style="height: 5rpx;"></div>
                            {{ obj.licenseNumber?obj.licenseNumber:'暂无' }}
                            <div style="height: 5rpx;"></div>
                        </div>
                    </div>
                    <div style="height: 10px;"></div>
                    <div class="form-flex">
                        <div style="width: 30%;color: #1A512C;font-weight: 500;">预计收集</div>
                        <div style="display: flex;align-items: center;width: 70%;">
                            <div class="borders-min" style="width: 60%;">
                            <div style="height: 5rpx;"></div>
                            {{ obj.vehicleOrganicType?obj.vehicleOrganicType:'暂无' }}
                            <div style="height: 5rpx;"></div>
                            </div>
                            <div style="width: 5px;"></div>
                            <div class="borders-min" style="width: 40%;">
                            <div style="height: 5rpx;"></div>
                            {{ obj.estimatedWeight?obj.estimatedWeight:'暂无' }}吨
                            <div style="height: 5rpx;"></div>
                            </div>
                        </div>
                    </div>
                    <!-- <div style="height: 10px;"></div> -->
                    <div v-for="item in obj.workOrderDetailVOList" style="margin-top: 10px;">
                        <div class="form-flex">
                        <div style="width: 30%;color: #1A512C;font-weight: 500;">收运点</div>
                        <div class="borders">
                            <div style="height: 5rpx;"></div>
                            {{ item.farmName }}
                            <div style="height: 5rpx;"></div>
                        </div>
                    </div>
                    </div>
                    <div style="height: 10px;"></div>
                </div>
                <!-- 按钮 -->
                <div style="height: 10px;"></div>
                <div class="footer">
                    <div class="button-footer" @click="cancel">返回首页</div>
                    <div class="button-footer" @click="lookMap">线路查看</div>
                    <div class="button-footer" @click="taking">工单接取</div>
                </div>
            </div>
        </div>
	</view>
</template>
<script>
import {lookOrd,taking} from '../api/api'
export default {
    data() {
        return {
            obj:{},
            time:'',
            time1:'',
            time2:'',
        }
    },
    methods: {
        objList(){
            lookOrd({}).then(res=>{
                console.log(res.data,'list');
                const datetimeStr = res.data.data.launchTime
                // const anotherTimeStr = res.data.data.estimatedDuration;
                this.time = datetimeStr.split(' ')[0]; // "2024-01-01"
                this.time1 = datetimeStr.split(' ')[1]; // "00:00:00"
                if(res.data.code==200){
                    this.obj = res.data.data;
                }
            })
        },
        // 接单
        taking(){
            uni.showModal({
                title: '提示',
                content: '确认要接单吗',
                showCancel: true,
                success: ({ confirm, cancel }) => {
                    if(confirm){
                        taking({
                id:this.obj.id
            }).then(res=>{
                console.log(res.data);
                if(res.data.code==200){
                    uni.showToast({
                        title: res.data.msg,
                        icon: 'success',
                        mask: true
                    })
                    uni.setStorageSync("state",true);
                    uni.navigateBack({delta:1})
                }else{
                    uni.showToast({
                        title: res.data.msg,
                        icon: 'none',
                        mask: true
                    })
                }
            })
                    }
                }
            })
            
        },
        // 取消
        cancel(){
            uni.navigateBack({ delta: 1 })
        },
        //查看路线
        lookMap(){
            console.log(this.obj.workOrderDetailVOList,'this.obj');
            let ids = this.obj.workOrderDetailVOList.map((item)=>item.farmId);
            uni.navigateTo({
         url: `/pagesDispatch/index/map?id=${ids}`
      });
        }
    },
    onShow(){
        this.objList();   
    }
}
</script>
<style lang="scss">
.container{
    background: #394E36;
    .border{
        border-radius: 10px;
        background: #E3EDE2;
        height: 100vh;
        overflow-y: scroll;
        .border-content{
            width: 90%;
            margin-left: 5%;
        }
    }
}
.top-line{
    display: flex;
    align-items: center;
}
page{
    background: #E3EDE2;
}
.line{
    background: #1A512C;
    width: 7rpx;
    height: 35rpx;
}
.maps{
    border: 2px solid #1A512C;
    overflow: hidden;
    border-radius: 10px;
}
.form-flex{
    display: flex;
    align-items: center;
    width: 100%;
}
.borders{
    border: 1px solid #1A512C;
    border-radius: 5px;
    text-align: center;
    width: 70%;
}
.borders-min{
    border: 1px solid #1A512C;
    border-radius: 5px;
    text-align: center;
}
.footer{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.button-footer{
    width: 33%;
    height: 50px;
    background: #46A164;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 17px;
    font-weight: 500;
    border-radius: 10px;
}
</style>